<template>
  <div>
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>品牌型号管理</span>
        <el-button type="text" @click="showAddRowDialog">添加品牌</el-button>
      </div>
      <el-table
        :data="brandList"
        border
        v-loading="loadingTable"
        @expand-change="onRowExpand"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.models" size="small" border>
              <el-table-column
                label="序号"
                type="index"
                width="55"
                align="center"
              ></el-table-column>
              <!--<el-table-column
                prop="id"
                label="ID"
                align="center"
              ></el-table-column>-->
              <el-table-column
                prop="modelName"
                label="型号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="sort"
                label="展示排序"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime | dateFormatMin }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="280">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="onEditModel(props.row, scope.row)"
                    >编辑
                  </el-button>
                  <el-button
                    type="text"
                    @click="onDeleteModel(props.row, scope.row)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
        ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateFormatMin }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="primary" @click="onEditBrand(scope.row)"
                >编辑
              </el-button>
              <el-button type="danger" @click="onDeleteBrand(scope.row)"
                >删除
              </el-button>
              <el-button type="primary" @click="onAddModel(scope.row)"
                >添加型号
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-section"
          background
          @current-change="onPaging"
          :page-size="pageVo.size"
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes,prev, pager, next"
          :total="pageVo.total"
        />
      </el-row>
    </el-card>
    <!--    编辑row对话框-->
    <el-dialog title="编辑品牌" :visible.sync="editRowVisible">
      <el-form :model="brand" label-position="left" label-width="120px">
        <el-form-item label="品牌名称">
          <el-input
            v-model="brand.brandName"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="brand.sort"
            placeHolder="请输入该字段"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRowVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSaveRow">保存</el-button>
      </span>
    </el-dialog>
    <!--    编辑型号属性对话框-->
    <el-dialog title="编辑型号" :visible.sync="editModelVisible">
      <el-form :model="model" label-position="left" label-width="120px">
        <el-form-item label="型号名称">
          <el-input
            v-model="model.modelName"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="model.sort"
            placeHolder="请输入该字段"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editModelVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSaveModel">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addBrand,
  getBrandByPage,
  removeBrandById,
  updateBrandById
} from "@/api/admin-api/BrandApi";
import {
  addBrandModel,
  getBrandModelByPage,
  removeBrandModelById,
  updateBrandModelById
} from "@/api/admin-api/BrandModelApi";

export default {
  name: "Brand",
  data() {
    return {
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: "create_time" }] //排序字段
      },
      editModelVisible: false,
      editRowVisible: false,
      model: {
        //型号属性
        brandId: "",
        brandName: "",
        sort: 0
      },
      brand: {
        id: null,
        supId: null,
        brandName: null,
        sort: 0,
        createTime: null,
        updateTime: null,
        dataState: null,
        lastVersion: null,
        createUserId: null
      },
      loadingTable: false,
      brandList: []
    };
  },
  methods: {
    onRowExpand(row) {
      //行展开,加载当前品牌的型号表
      this.fillBrandModels(row);
    },
    fillBrandModels(brand) {
      let query = {
        current: 1,
        size: 200,
        orders: [{ sort: true }],
        brandId: brand.id
      };
      if (brand.models.length === 0) {
        getBrandModelByPage(query).then(data => {
          // this.$set(brand, "models", data.records);
          brand.models = data.records;
        });
      }
    },
    onPaging(currentPage) {
      // 页码改变
      this.pageVo.current = currentPage;
      this.loadBrandList();
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageVo.size = val;
      this.loadBrandList();
    },
    onSaveModel() {
      if (this.model.id) {
        updateBrandModelById(this.model).then(() => {
          this.$message.success("操作成功");
          this.fillBrandModels(this.brand);
          this.editModelVisible = false;
        });
      } else {
        addBrandModel(this.model).then(() => {
          this.$message.success("操作成功");
          this.fillBrandModels(this.brand);
          this.editModelVisible = false;
        });
      }
    },
    onSaveRow() {
      //保存或更新
      if (this.brand.id) {
        //更新
        this.$loading();
        updateBrandById(this.brand)
          .then(() => {
            this.$message.success("操作成功");
            this.loadBrandList();
            this.$loading().close();
            this.editRowVisible = false;
          })
          .catch(() => {
            this.$loading().close();
          });
      } else {
        //保存
        this.$loading();
        addBrand(this.brand)
          .then(() => {
            this.$message.success("操作成功");
            this.$loading().close();
            this.loadBrandList();
            this.editRowVisible = false;
          })
          .catch(() => {
            this.$loading().close();
          });
      }
    },
    showAddRowDialog() {
      //显示添加行对话框
      this.editRowVisible = true;
      this.brand = this.$options.data().brand;
    },
    loadBrandList() {
      this.loadingTable = true;
      getBrandByPage(this.pageVo)
        .then(data => {
          data.records.forEach(brand => {
            brand.models = [];
          });
          this.brandList = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.loadingTable = false;
        })
        .catch(() => {
          this.loadingTable = false;
        });
    },
    onAddModel(row) {
      //添加型号
      this.model.brandId = row.id;
      this.brand = row;
      this.editModelVisible = true;
    },
    onEditModel(brand, model) {
      this.brand = brand;
      this.model = model;
      this.editModelVisible = true;
    },
    onEditBrand(row) {
      //编辑行
      this.brand = row;
      this.editRowVisible = true;
    },
    onDeleteModel(brand, model) {
      this.$confirm("确定要删除当前行吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$loading();
        removeBrandModelById(model.id)
          .then(() => {
            this.fillBrandModels(brand);
            this.$loading().close();
          })
          .catch(() => {
            this.$loading().close();
          });
      });
    },
    onDeleteBrand(row) {
      //删除行
      this.$confirm("确定要删除当前行吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$loading();
        removeBrandById(row.id)
          .then(() => {
            this.loadBrandList();
            this.$loading().close();
          })
          .catch(() => {
            this.$loading().close();
          });
      });
    }
  },
  mounted() {
    this.loadBrandList();
  }
};
</script>
<style scoped></style>
